<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div></div>
    <a href="http://git"></a>
    <p><span></span></p>
    <!-- a[title='github' href='https://github.com']   -->
    <a href="https://github.com" title="github"></a>
    <!-- h1{This is page} -->
    <h1>This is page</h1>
    p.msf{hello}*3      
    <p class="msg1">hello</p>
    <p class="msg2">hello</p>
    <p class="msg3">hello</p>
    div.container>ul>li.lis${hello$}*3
    <div class="container">
        <ul>
            <li class="lis1">hello1</li>
            <li class="lis2">hello2</li>
            <li class="lis3">hello3</li>
        </ul>
    </div>
    div.container>section{$*3}*3+button.btn.btn-primart
    <div class="container">
        <section>1*3</section>
        <section>2*3</section>
        <section>3*3</section>
        <button class="btn btn-primart"></button>
    </div>

    ul*2>li*3
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    div.container>section*3^footer
    <div class="container">
        <section></section>
        <section></section>
        <section></section>
    </div>
    <footer></footer>

    (ul>li*3)*2
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>    